<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>js_06</title>

		<script type="text/javascript">
			
			//获取元素节点的子节点
			window.onload = function() {
				
				//1.获取#city节点的所有子节点
				var cityNode=document.getElementById("city");
				
				//2.利用元素节点的childNodes方法，可以获取指定元素节点的所有子节点.
				//但该方法不经常使用
				alert(cityNode.childNodes.length);
				
				//3.获取#city节点的所有的li字节点.
				var cityLiNodes=cityNode.getElementsByTagName("li");
				alert(cityLiNodes.length);
				
				//4.获取指定节点的第一个子节点和最后一个子节点.
				alert(cityNode.firstChild);
				alert(cityNode.lastChild);
			}
		</script>

	</head>

	<body>
		<p>你喜欢哪个城市？</p>
		<ul id="city">
			<li id="bj" name="BeiJing">北京</li>
			<li>上海</li>
			<li>东京</li>
			<li>首尔</li>
		</ul>
		<br/><br/>
		<p>你喜欢哪款单机游戏</p>
		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>
		<br/><br/> name:
		<input type="text" name="username" id="name" value="idea" />
	</body>

</html>